<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href='http://baidu.com' id="btn1">点击1</a>
    <button onclick="fn(event,this)">点击2</button>

    <input type="text" name="" id="txt1">
    <input type="text" name="" id="txt2">
    <script>
        document.querySelector('#btn1').onclick = function (e) {
            console.log('按钮1', e)
            e.preventDefault(); // 1
            // return false; //2

            console.log('this: ', this);
        }

        function fn(e, _this) {
            console.log('按钮2', e)
            console.log('this: ', this); // window 说明 绑定事件的回调函数的调用者是window

            console.log('_this: ', _this);
        }   

        /**
         * oninput 输入后键盘抬起触发事件
         * 
         * e: InputEvent
         */
        document.querySelector('#txt1').oninput = function(e){
            console.log(e.target.value);
            console.log('txt1 oninput e: ', e);
        }
        
        /**
         * onchange 内容变化失去焦点时触发
         * 
         * e: Event 
         */
        document.querySelector('#txt2').onchange = function(e){
            console.log(e.target.value);
            console.log('txt2 onchange e: ', e);
        }
    </script>
</body>

</html>